<template>
<div class="footer">
    <div class="ftop clear">
        <div class="foot-wrap fl">
            <div class="item">
                <h4 class="title">产品</h4>
                <ul class="list">
                    <li class="list-item"><a href="#">直啵平台</a></li>
                    <li class="list-item"><a href="#">直啵硬件</a></li>
                    <li class="list-item"><a href="#">直啵云剪</a></li>
                    <li class="list-item"><a href="#">直啵云分发</a></li>
                </ul>
            </div>
            <div class="item">
                <h4 class="title">关于我们</h4>
                <ul class="list">
                    <li class="list-item"><a href="#">关于直啵</a></li>
                    <li class="list-item"><a href="#">婚礼案件</a></li>
                    <li class="list-item"><a href="#">新闻中心</a></li>
                    <li class="list-item"><a href="#">帮助中心</a></li>
                </ul>
            </div>
            <div class="item">
                <h4 class="title">联系我们</h4>
                <ul class="list">
                    <li class="list-item"><i class="icon iconfont icon-phone"></i><a href="#">客服电话：4009699192</a></li>
                    <li class="list-item"><i class="icon iconfont icon-message"></i><a href="#">客服邮箱：Lilyai@tvunetworks.com</a></li>
                    <li class="list-item"><i class="icon iconfont icon-wechat"></i><a href="#">客服微信：tvukefu2018</a></li>
                    <li class="list-item">周一到周四 9:00-18:00</li>
                    <li class="list-item">周五到周日 8:00-20:00</li>
                </ul>
            </div>
        </div>
        <ul class="code footerlist fr">
            <li>
                <img src="~common/image/base/qrcode.png" alt="">
                <h3>媒体直啵公众号</h3>
            </li>
            <li>
                <img src="~common/image/base/code.png" alt="">
                <h3>客服微信</h3>
            </li>
        </ul>
    </div>
    <div class="fbottom">
        <div class="line"></div>
        <p>沪ICP备15041338号</p>
        <p>COPYRIGHT 2018 通维数码科技(上海)有限公司</p>
    </div>
</div>
</template>

<script type="text/ecmascript-6">

export default {
    data() {
        return {
        };
    }
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable"
@import "~common/stylus/mixin"
    .footer
        width 100%
        height 500px
        padding-top 100px
        background rgba(255,120,120,1)
        font-size $font-size-small-s
        color #fff
        font-weight 400
        .ftop
            width 1080px
            height 238px
            margin 0 auto
            padding-bottom 4rem
            .foot-wrap
                .item
                    width 152px
                    display inline-block
                    vertical-align top
                    .title
                        line-height 18px
                        font-weight:500
                        margin-bottom 13px
                    .list
                        line-height 28px
                        font-weight:400
                        .list-item
                            white-space: nowrap
                            .icon
                                vertical-align middle
                                margin-right 5px
                                font-weight 400
                            a
                                color #fff
                                font-weight 400
            .code
                width 270px
                font-size 0
                vertical-align top
                li
                    width 120px
                    display inline-block
                    font-size $font-size-small-s
                    text-align center
                    &:first-child
                        margin-right 30px
                    img
                        width 100%
                    h3
                        margin-top 24px
        .fbottom
            text-align center
            .line
                width 1080px
                height 2px
                border 1px solid
                margin 0 auto 43px auto
            p
                text-align center
                line-height 33px
@media screen and (max-width 1300px)
    .footer
        padding-top 80px
        .ftop
            width 78.125%
            .foot-wrap
                .item
                    width 100px
        .fbottom
            .line
                width 78.125%
                margin 0 auto 35px auto
@media screen and (max-width 900px)
    .footer
        height 420px
        padding-top 60px
        .ftop
            padding-bottom 3rem
            // height 3.1733rem
            width 90%
            .foot-wrap
                .item
                    width 90px
                    &:last-child
                        width 152px
        .fbottom
            .line
                width 90%
                margin 0 auto 25px auto
@media screen and (max-width 767px)
    .footer
        height 6.8rem
        padding-top 0.6667rem
        .ftop
            width 90%
            height: 4rem
            .foot-wrap
                display none
                width 100%
                .item
                    width 33%
            .code
                width 100%
                display flex
                justify-content space-around
                li
                    width 25%

        .fbottom
            .line
                width 90%
                margin 0 auto 20px auto
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3)
    .footer
        height 6.8rem
        padding-top 0.6667rem
        .ftop
            width 90%
            .foot-wrap
                display none
                width 100%
                .item
                    width 33%
            .code
                width 100%
                display flex
                justify-content space-around
                li
                    width 25%
        .fbottom
            .line
                width 90%
                margin 0 auto 20px auto
</style>
